<template>
    <div ref="container2" class="container2">
       <div class="container2-loading" v-if="loading && session.isSignal===0"">
            <span class="loading-text">
                图表正在生成中...
            </span>
        </div>
        <div v-else>
            <div class="container2-top">
                <div class="left" v-if="title">{{title}}</div>
                <div class="right"  v-if="childComponentLen > 1">
                    <span class="arrow-left-icon arrow-icon"></span>
                    <div class="indicator">
                        <span>{{currentTabItemIndex + 1}}/{{childComponentLen}}</span>
                    </div>
                    <span class="arrow-right-icon arrow-icon"></span>
                    <div class="previous" @click="onTabChange(-1)"></div>
                    <div class="next" @click="onTabChange(1)"></div>
                </div>
            </div>
            <jgyRender :businessConfig="businessConfig" :configData="currentTabItem" v-bind="$attrs" />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        childAnswer: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        const sessionParent = this.getSessionParent(this.$parent);
        return {
            currentTabItemIndex: 0,
            cardContainerStyle: {
                width: 300,
            },
            session:sessionParent.session
        };
    },
    mounted() {
        const container2Ele = this.$refs.container2;
        this.cardContainerStyle.width = container2Ele.offsetWidth;
    },
    computed: {
        childComponents() {
            const {  components = []  } = this.childAnswer;
            return components;
        },
        childComponentLen() {
            return this.childComponents.length;
        },
        currentTabItem() {
            return this.childComponents[this.currentTabItemIndex]||{};
        },
        loading() {
            return this.childComponentLen < 1;
        },
        title() {
            if(this.currentTabItem.title_config && this.currentTabItem.title_config.data){
                return this.currentTabItem.title_config.data.h1
            }
            return '';
        },
        businessConfig() {
            return {
                hiddenTitle: true,
                dependenceCdnHost: 's.thsi.cn',
                logoUrl: 'url',
            };
        },
    },
    methods: {
        getSessionParent(parent){
            if(!parent.session){
                return this.getSessionParent(parent.$parent);
            }
            return parent;
        },
        onTabChange(diff) {
            if (this.childComponentLen > 0) {
                this.currentTabItemIndex = Math.min(Math.max(0, this.currentTabItemIndex + diff), this.childComponentLen - 1);
            }
        },
    }
};
</script>

<style lang="less" scoped>
.container2-loading {
    border-radius: 4px;
    background: #F3F8FF;
    height: 32px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    .container2-loading-img {
        height: 11px;
    }
    .loading-text {
        margin-left: 5px;
        font-size: 14px;
    }
}
.container2-top {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    .left {
        font-weight: bold;
        font-size: 18px;
        flex: 1;
        line-height: 24px;
    }
    .right {
        width: 60px;
        height: 24px;
        font-size: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .indicator {
            height: 19px;
            width: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            line-height: 14px;
        }
        .icon {
            width: 12px;
            height: 12px;
        }
        .previous {
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 18px;
            opacity: 0;
        }
        .next {
            position: absolute;
            top: 0;
            right: 0;
            width: 25px;
            height: 18px;
            opacity: 0;
        }
    }
}
</style>
<style lang="less">
@import (once) '@/styles/variable.less';
.container2 .jgy_outer {
    margin: 8px 0 0 0;
}
.jgy_sdk .black .container2-loading {
    background: @container-loading-bg!important;
}

.container2 .arrow-icon{
    background: url('../../../../assets/arrow-down.png') no-repeat;
    background-size: cover;
    width: 18px;
    height: 12px;
    background-position-y: -3px;
}
.container2 .arrow-left-icon {
    transform: rotate(90deg);
}
.container2 .arrow-right-icon {
    transform: rotate(-90deg);
}
</style>

